body {
    margin: 0;
}
.stage {
    margin-top: 30px;
    visibility: hidden;
    height: 240px;
    overflow: hidden;
    position: fixed;
    width:100%;
    opacity: 1;
    z-index:999;
    display: block;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.dm {
    width: 100%;
    -webkit-animation: danmu 8s linear infinite;
    animation: danmu 8s linear infinite;
    color: #fff;
    text-align: right;
    margin-top: 10px;
    margin-bottom: 10px;
}
.dm div {
    display: block;
    transform:translateX(100%);
    -webkit-transform:translateX(100%);
}


.d0 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.d1 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}

.d2 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.d3 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}

.d4 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

.d5 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}


.d6 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.d7 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}

.d8 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.d9 {
    -webkit-transform:translateY(20px);
    transform:translateY(20px);
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}

@-webkit-keyframes danmu{
    0% {-webkit-transform:translateX(0);}
    100% {-webkit-transform:translateX(-200%);}
}

@keyframes danmu{
    0% {transform:translateX(0);}
    100% {transform:translateX(-200%);}
}




.bg {
    position:relative;
}
.bdm {
    position: absolute;
    color:#fff;
    background: #aaa;
    padding: 0 5px;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    opacity:0;
    -webkit-transform:translateY(120px);
    transform:translateY(120px);
    -webkit-animation: updanmu 4s linear infinite;
    animation: updanmu 4s linear infinite;
}
.b2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.b3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@-webkit-keyframes updanmu{
    0% {-webkit-transform:translateY(120px);opacity:0}
    25% {-webkit-transform:translateY(90px);opacity:1}
    50% {-webkit-transform:translateY(60px);opacity:1}
    75% {-webkit-transform:translateY(30px);opacity:1}
    100% {-webkit-transform:translateY(0);opacity:0}
}

@keyframes updanmu{
    0% {transform:translateY(120px);opacity:0}
    25% {transform:translateY(90px);opacity:1}
    50% {transform:translateY(60px);opacity:1}
    75% {transform:translateY(30px);opacity:1}
    100% {transform:translateY(0);opacity:0}
}



